<template>
    <div>
        饭店名称:<input type="text" v-model="ps.name">
        饭店地址:<select v-model="ps.id">
            <option value="">请选择</option>
            <option :value="o.cid" v-for="o in dan" :key="o.cid">{{o.cname}}</option>
        </select>
        <input type="button" value="查询" @click="show()">
        <input type="button" value="重置" @click="chong()">
        <table class="table table-border">
            <tbody>
                <tr>
                    <td>ID</td>
                    <td>饭店名称</td>
                    <td>图片</td>
                    <td>分店名称</td>
                    <td>状态</td>
                    <td>客服电话</td>
                    <td>地址</td>
                    <td>操作</td>
                </tr>
                <tr v-for="o in data.plist" :key="o.did">
                    <td>{{o.did}}</td>
                    <td>{{o.dname}}</td>
                    <td><img :src="o.tu" width="100px" height="100px" ></td>
                    <td>{{o.fen}}</td>
                    <td>{{o.flag==1?"启用":"停用"}}</td>
                    <td>{{o.phone}}</td>
                    <td>{{o.cname}}</td>
                    <td><input type="button" value="删除" @click="shan(o.did,true)"></td>
                </tr>
            </tbody>
        </table>
        一共<span>{{data.count}}</span>数据
        每页<span>{{ps.pagesize}}</span>条
        共<span>{{ps.pageindex}}/{{data.pagecount}}</span>页
        <input type="button" value="首页" @click="page(1)">
        <input type="button" value="上一页" @click="page(ps.pageindex-1)">
        <input type="button" :value="o" v-for="o in data.pagecount" :key="o" @click="page(o)">
    <input type="button" value="下一页" @click="page(ps.pageindex+1)">
<input type="button" value="尾页" @click="page(data.pagecount)">
<input type="number" v-model="ps.pageindex">
<input type="button" value="跳转" @click="page(ps.pageindex)">
<select @change="pa">
    <option :value="o" v-for="o in tan" :key="o">每页{{o}}/条</option>
</select>
    </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import moment from 'moment';
import axios from 'axios';
import {useRoute,useRouter} from 'vue-router'
const route = useRoute()
const router = useRouter()
let tan:any = ref([2,3,4,5])
let dan:any = ref({})
let data:any = ref({
    count:'',
    pagecount:'',
    plist:[]
})
let ps:any = ref({
    name:'',
    id:'',
    pageindex:1,
    pagesize:2
})
const pa =(e:any)=>
{
    ps.value.pageindex=1
    ps.value.pagesize = e.target.value
    show()

}
const page = (val:any)=>{
    if(val>=1&&val<=data.value.pagecount)
    {
        ps.value.pageindex=val
    }
    show()
}
const chong=()=>{
    
    ps.value.name='',
    ps.value.id='',
    ps.value.pageindex=1,
    ps.value.pagesize=2
    show()

}
onMounted(()=>{
show()
lie()
})
const show=()=>{
    axios({
        url:'https://localhost:7046/api/Dan/FenDTO',
        method:'get',
        params:ps.value
    })
    .then(res=>{
        Object.assign(data.value,res.data)
    })
}
const lie = ()=>{
    axios({
        url:'https://localhost:7046/api/Dan/Chengs',
        method:'get'
    })
    .then(res=>{
        dan.value = res.data
    })
}
const shan =(id:any,z:any)=>{
    if(!confirm("确定要删除吗"))
    {

    }
    axios({
        url:'https://localhost:7046/api/Dan/Delete',
        method:'put',
        params:{
            id:id,
            z:z
        }
    })
    .then(res=>{
        if(res.data>0)
        {
            alert("删除成功")
            show()
        }
        else
        {
             alert("删除失败")
             return;
        }
    })
}
</script>

<style scoped>

</style>